<template>
  <div v-if="hosData">
    <div>
      <div class="container">
        <mt-header title="" fixed style="background-color: #1397d7">
          <mt-button
            slot="left"
            icon="back"
            @click="$router.go(-1)"
          ></mt-button>
        </mt-header>
      </div>
    </div>
    <div>
      <div class="container">
        <detailCard :zhos="hosData.data[bid]"></detailCard>
      </div>
    </div>
    <div class="container selectkeshi" :class="{ fixed: tabbarBoxFixed }">
      <div class="keshi">
        <ul>
          <li
            @click="(now = '全部科室'), getAll()"
            :class="{ active: now == '全部科室' }"
          >
            全部科室
          </li>
          <li
            @click="(now = '口腔科'), (keshi = '口腔科'), check()"
            :class="{ active: now == '口腔科' }"
          >
            口腔科
          </li>
          <li
            @click="(now = '肛肠科'), (keshi = '肛肠科'), check()"
            :class="{ active: now == '肛肠科' }"
          >
            肛肠科
          </li>
          <li
            @click="(now = '皮肤科'), (keshi = '皮肤科'), check()"
            :class="{ active: now == '皮肤科' }"
          >
            皮肤科
          </li>
          <li
            @click="(now = '内科'), (keshi = '内科'), check()"
            :class="{ active: now == '内科' }"
          >
            内科
          </li>
          <li
            v-for="(x, i) in hosData.data[bid].keshi.split(',')"
            :key="i"
            @click="now = i"
            :class="{ active: now == i }"
          >
            {{ x }}
          </li>
        </ul>
        <mt-popup modal="false" v-model="popupVisible" position="bottom">
          <ul class="tanchu_keshi">
            <li
              @click="(now = '全部科室'), getAll()"
              :class="{ active: now == '全部科室' }"
            >
              全部科室
            </li>
            <li
              @click="(now = '口腔科'), (keshi = '口腔科'), check()"
              :class="{ active: now == '口腔科' }"
            >
              口腔科
            </li>
            <li
              @click="(now = '肛肠科'), (keshi = '肛肠科'), check()"
              :class="{ active: now == '肛肠科' }"
            >
              肛肠科
            </li>
            <li
              @click="(now = '皮肤科'), (keshi = '皮肤科'), check()"
              :class="{ active: now == '皮肤科' }"
            >
              皮肤科
            </li>
            <li
              @click="(now = '内科'), (keshi = '内科'), check()"
              :class="{ active: now == '内科' }"
            >
              内科
            </li>
            <li
              v-for="(x, i) in hosData.data[bid].keshi.split(',')"
              :key="i"
              @click="now = i"
              :class="{ active: now == i }"
            >
              {{ x }}
            </li>
          </ul>
          <div class="button_center">
            <mt-button @click="tanru()">取消</mt-button>
          </div>
        </mt-popup>
      </div>
      <div class="icon" @click="tanchu">
        <img aria-hidden="true" src="@/assets/images/Hospital/menu.png" />
      </div>
    </div>
    <div style="margin-top: 3vw">
      <div class="container" v-if="docData">
        <DoctorCard
          v-for="(zv, i) in docData.data"
          :key="i"
          :zv="zv"
          @click.native="$router.push(`/doctorDetail?${zv.did}`)"
        ></DoctorCard>
      </div>
    </div>
  </div>
</template>

<script>
import detailCard from "@/components/DetailCard.vue";
import DoctorCard from "@/components/DoctorCard.vue";
export default {
  components: {
    detailCard,
    DoctorCard,
  },
  data() {
    return {
      now: 0,
      popupVisible: false,
      bid: this.$route.fullPath.split("?")[1] - 1,
      hosData: null,
      docData: null,
      tabbarBoxFixed: false,
      keshi: "口腔科",
    };
  },
  methods: {
    getAll() {
      this.axios(`/users/hospital_doctor?cid=${this.bid}`).then((res) => {
        this.docData = res.data;
      });
    },
    check() {
      this.axios(
        `/users/hospital_doctor2?cid=${this.bid}&kshi=${this.keshi}`
      ).then((res) => {
        this.docData = res.data;
      });
    },
    tanchu() {
      this.popupVisible = true;
    },
    tanru() {
      this.popupVisible = false;
    },
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // let offsetTop = document.querySelector(".selectkeshi").offsetTop;
      if (scrollTop > 265) {
        this.tabbarBoxFixed = true;
      } else {
        this.tabbarBoxFixed = false;
      }
    },
  },
  mounted() {
    this.axios(`/users/hospital`).then((res) => {
      this.hosData = res.data;
    });
    this.getAll();
    window.addEventListener("scroll", this.handleScroll, true);
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 0 3vw;
}
.keshi {
  width: 86vw;
  overflow: auto;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-y: auto;
  > ul {
    color: #989898;
    width: 200vw;
    display: flex;
    overflow: auto;
    li {
      background-color: #eee;
      box-sizing: border-box;
      padding: 2vw;
      margin-right: 2vw;
      border-radius: 3vw;
      border: #eee 1px solid;
      &.active {
        border-color: #1397d7;
        color: #1397d7;
        background-color: #fff;
      }
    }
  }

  .tanchu_keshi {
    padding: 3vw;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    li {
      text-align: center;
      background-color: #eee;
      border: #eee 1px solid;
      box-sizing: border-box;
      width: 22%;
      padding: 2vw;
      border-radius: 3vw;
      margin: 3vw 1.5vw 0 0;
      &.active {
        border-color: #1397d7;
        color: #1397d7;
        background-color: #fff;
      }
    }
  }
  .button_center {
    margin: 0;
    width: 100vw;
    text-align: center;
    .mint-button {
      margin: 3vh auto;
      width: 50vw;
      height: 5vh;
      border-radius: 5vh;
      background-color: #1397d7;
      color: #fff;
    }
  }
}

.keshi::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.selectkeshi {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 3vw;
}
::v-deep.icon {
  width: 10%;
  > img {
    width: 10vw;
  }
}
::v-deep.fixed {
  position: fixed;
  top: 0;
  margin-top: 5vh;
}
</style>